<template>
  <div>
    <form>
      <label>姓名：</label>
      <input type="name" v-model.trim="form.name" /><br /><br />
      <label>年龄：</label>
      <input type="age" v-model.number="form.age" /><br /><br />

      <label>身高：</label>
      <input type="number" v-model.number="form.number" />(米)<br /><br />

      <label>体重：</label>
      <input type="weight" v-model.number="form.weight" />(公斤)<br /><br />

      <label>病史：</label>
      <input type="text" v-model.trim="form.text" /><br /><br />

      <button @click.prevent="fn">诊断</button>
    </form>
    <!--  -->
    <p v-show="key">{{ form.name }} 的诊断结果：{{ res }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      res: "",
      key: false,
      form: {
        name: "",
        age: "",
        number: "",
        weight: "",
        text: "",
      },
    };
  },
  methods: {
    // 18.5  23.9
    fn() {
      // 非空判断
      if (
        this.form.name === "" ||
        this.form.age === "" ||
        this.form.number === "" ||
        this.form.weight === "" ||
        this.form.text === ""
      ) {
        alert("内容不能为空！");
        return;
      }
      this.key = true;
      let x = this.form.weight / (this.form.number ^ 2);
      if (x < 18.5) {
        this.res = "细狗";
      } else if (x > 23.9) {
        this.res = "胖子";
      } else {
        this.res = "正常";
      }
      // this.form = {};
    },
  },
};
</script>
